<template>
  <div class="forget-page">
    <div class="xm-form-1">
      <div class="input-group flex border-bottom">
        <label>账号</label>
        <input type="text" class="flex-1" v-model="form.username"  placeholder="请输入登录账号" autocomplete="off">
        <i class="close" v-show="form.username!=''" @click="form.username=''"></i>
        <p class="error" v-show="tips.username">{{tips.username}}</p>
      </div>
      <div class="input-group flex border-bottom">
        <label>手机号码</label>
        <input type="text" class="flex-1" v-model="form.mobile"  placeholder="请输入手机号码" autocomplete="off">
        <i class="close" v-show="form.mobile!=''" @click="form.mobile=''"></i>
        <p class="error" v-show="tips.mobile">{{tips.mobile}}</p>
      </div>
      <!--<div class="code-group flex">-->
      <div class="input-group code-group flex border-bottom">
        <label>验证码</label>
        <input type="text" v-model.trim="form.vcode" class="flex-1"  placeholder="请输入短信验证码" autocomplete="off">
        <i class="close" v-show="form.vcode!=''" @click="form.vcode=''"></i>
        <span class="code-phone" :class="{active: active}" @click="sendCode">{{count | second}}</span>
        <p class="error" v-show="tips.vcode">{{tips.vcode}}</p>
      </div>
      <!--</div>-->
      <div class="notice flex" v-show="tips.notice">
        <p class="error">{{tips.notice}}</p>
      </div>
      <a href="javascript:;" id="next" class="btn btn1 next" @click="next">下一步</a>
      <p class="forgetTip">分店账号忘记密码请联系总店管理员！</p>
    </div>
    <div class="links">
      <router-link to="/home">返回首页</router-link>
      <router-link to="/register">用户注册</router-link>
      <router-link to="/login">返回登录</router-link>
    </div>
  </div>
</template>
<script>
  import steps from '../../components/steps/steps';
  let reg = /^(0|86|17951)?(1)[0-9]{10}$/;
  let tips = {
      username: null,
      mobile: null,
      vcode: null,
      notice: null
  }
  export default {
    props: {},
    data() {
      return {
        count: '立即发送',
        active: false,
        form:{
          username: '',
          mobile: '',
          vcode: ''
        },
        tips: tips
      };
    },
    methods: {
        next(){
            if(this.verify()){
                forgetPwd(this.form).then(data=>{
                    if(data.returnCode == '000000'){
                        this.$router.push({name: 'rePwd'});
                    }else{
                        this.tips.notice = data.errorMsg;
                    }
                });
            }
        },
        /**
         * 是否验证
         *  @param 是否发送短信 isSend
         * */
      verify(isSend){
          this.tips = {
              username: null,
              mobile: null,
              vcode: null,
              notice: null
          };
          if(!this.form.username || this.form.username ==''){
              this.tips.username = '账号不能为空';
              return false;
          }
          if(!reg.test(this.form.mobile)){
              this.tips.mobile = '请输入正确的手机号码';
              return false;
          }
          if(!isSend && (!this.form.vcode || this.form.vcode == '')){
              this.tips.vcode = '验证码不能为空';
              return false;
          }
          return true;
      },
      sendCode(){
        if(!this.verify(true)){
          return;
        }
        if(this.count == '立即发送'){
          this.count = 60;
          this.countdown();
          forgotGetCode({phone: this.form.mobile, username: this.form.username}).then(data=>{
            if(data.returnCode != '000000'){
              Toast(data.errorMsg);
            }
          })
        }
      },
      countdown(){
        if(this.count > 0){
          this.count--;
          setTimeout(this.countdown, 1000);
        }else{
          this.count = '发送验证码';
        }
      }
    },
    filters: {
      second(val){
        if(typeof val == 'number'){
          return val + 's';
        }
        return val;
      }
    },
    created() {

    },
    mounted(){

    },
    watch:{
      'form.mobile': function(newValue, oldValue){
        if(reg.test(this.form.mobile)){
          this.active = true;
        }else{
          this.active = false;
        }
      }
    },
    components: {
      steps
    }
  };
</script>
<style lang="less" scoped>
  @import "../login/login.less";
  @import "./forgetPwd.less";

</style>
